<!DOCTYPE html>
<html lang="zh">
<meta charset="utf-8">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/public/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/public/css/layui.css" rel="stylesheet">
    <link href="/public/css/font-awesome.css" rel="stylesheet" />
    <!-- bootstrap-table 表格插件样式 -->
    <link href="/public/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link href="/public/js/jqTreeGrid/jquery.treegrid.css" rel="stylesheet" />
    <link href="/public/css/animate.css" rel="stylesheet" />
    <link href="/public/css/style.css" rel="stylesheet" />
    <link href="/public/css/checkbox.css" rel="stylesheet" />
    <link href="/public/js/select/select2.css" rel="stylesheet" />
    <link href="/public/app/css/app-ui.css" rel="stylesheet" />
</head>

<body class="gray-bg">

    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 select-info">
                <form id="menu-form">
                    <div class="select-list gd">
                        <ul>
                            <li>
                                菜单名称：
                                <input type="text" name="menuName" />
                            </li>
                            <li>
                                菜单状态：
                                <select name="visible">
                                    <option value="">所有</option>
                                    <option value="0">显示</option>
                                    <option value="1">隐藏</option>
                                </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.treeTable.search($('form').attr('id'))">
                                    <i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-outline btn-success btn-rounded btn-sm" onclick="$.operate.add(0)">
                                    <i class="fa fa-plus"></i> 新增 </a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="col-sm-12 select-info table-striped">
                <table id="bootstrap-table" data-mobile-responsive="true"></table>
            </div>
        </div>
    </div>

    <div>
        <script src="/public/js/jquery/jquery.min.js"></script>
        <script src="/public/js/bootstrap/bootstrap.min.js"></script>

        <!-- bootstrap-table 表格插件 -->
        <script src="/public/js/bootstrap-table/bootstrap-table.min.js"></script>
        <script src="/public/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
        <script src="/public/js/bootstrap-table/extensions/mobile/bootstrap-table-mobile.min.js"></script>
        <script src="/public/js/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
        <!-- jquery-validate 表单验证插件 -->
        <script src="/public/js/validate/jquery.validate.min.js"></script>
        <script src="/public/js/validate/messages_zh.min.js"></script>
        <script src="/public/js/validate/jquery.validate.extend.js"></script>
        <!-- jquery-validate 表单树插件 -->
        <script src="/public/js/jqTreeGrid/jquery.treegrid.min.js"></script>
        <script src="/public/js/jqTreeGrid/jquery.treegrid.extension.js"></script>
        <!-- jquery-export 表格导出插件 -->
        <script src="/public/js/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
        <script src="/public/js/bootstrap-table/extensions/export/tableExport.js"></script>
        <!-- 遮罩层 -->
        <script src="/public/js/blockUI/jquery.blockUI.js"></script>
        <script src="/public/js/layer/layer.min.js"></script>
        <script src="/public/js/layui/layui.js"></script>
        <script src="/public/app/js/common.js?v=2.2.0"></script>
        <script src="/public/app/js/app-ui.js?v=2.2.0"></script>
        <script src="http://tajs.qq.com/stats?sId=62048022"></script>
        <script>
            var ctx = "\/";
        </script>
    </div>
    <script>
        var addFlag = "";
        var editFlag = "";
        var removeFlag = "";
        var datas = [{
            "searchValue": null,
            "createBy": "admin",
            "createTime": "2018-03-16 03:33:00",
            "updateBy": null,
            "updateTime": null,
            "remark": "\u663E\u793A\u83DC\u5355",
            "params": null,
            "dictCode": 4,
            "dictSort": 1,
            "dictLabel": "\u663E\u793A",
            "dictValue": "0",
            "dictType": "sys_show_hide",
            "cssClass": "radio radio-info radio-inline",
            "listClass": "primary",
            "isDefault": "Y",
            "status": "0"
        }, {
            "searchValue": null,
            "createBy": "admin",
            "createTime": "2018-03-16 03:33:00",
            "updateBy": null,
            "updateTime": null,
            "remark": "\u9690\u85CF\u83DC\u5355",
            "params": null,
            "dictCode": 5,
            "dictSort": 2,
            "dictLabel": "\u9690\u85CF",
            "dictValue": "1",
            "dictType": "sys_show_hide",
            "cssClass": "radio radio-danger radio-inline",
            "listClass": "danger",
            "isDefault": "N",
            "status": "0"
        }];
        var prefix = ctx + "rest/system/menu"

        $(function () {
            var options = {
                id: "menuId",
                parentId: "parentId",
                expandAll: false,
                url: prefix + "/list",
                createUrl: prefix + "/add/{id}",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove/{id}",
                modalName: "菜单",
                columns: [{
                        title: '菜单名称',
                        field: 'menuName',
                        width: '20%',
                        formatter: function (row, index) {
                            if (row.icon == null || row == "") {
                                return row.menuName;
                            } else {
                                return '<i class="' + row.icon + '"></i> <span class="nav-label">' +
                                    row.menuName + '</span>';
                            }
                        }
                    },
                    {
                        field: 'orderNum',
                        title: '排序',
                        width: '10%',
                        align: "center"
                    },
                    {
                        field: 'url',
                        title: '请求地址',
                        width: '15%',
                        align: "center"
                    },
                    {
                        title: '类型',
                        field: 'menuType',
                        width: '10%',
                        align: "center",
                        formatter: function (item, index) {
                            if (item.menuType == 'M') {
                                return '<span class="label label-success">目录</span>';
                            } else if (item.menuType == 'C') {
                                return '<span class="label label-primary">菜单</span>';
                            } else if (item.menuType == 'F') {
                                return '<span class="label label-warning">按钮</span>';
                            }
                        }
                    },
                    {
                        field: 'visible',
                        title: '可见',
                        width: '10%',
                        align: "center",
                        formatter: function (row, index) {
                            return $.table.selectDictLabel(datas, row.visible);
                        }
                    },
                    {
                        field: 'perms',
                        title: '权限标识',
                        width: '15%',
                        align: "center",
                    },
                    {
                        title: '操作',
                        width: '20%',
                        align: "center",
                        formatter: function (row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag +
                                '" href="#" onclick="$.operate.edit(\'' + row.menuId +
                                '\')"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-info btn-xs ' + addFlag +
                                '" href="#" onclick="$.operate.add(\'' + row.menuId +
                                '\')"><i class="fa fa-plus"></i>新增</a> ');
                            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag +
                                '" href="#" onclick="remove(\'' + row.menuId +
                                '\')"><i class="fa fa-remove"></i>删除</a>');
                            return actions.join('');
                        }
                    }
                ]
            };
            $.treeTable.init(options);
        });

        function remove(id) {
            $.modal.confirm("确定删除该条" + $.table._option.modalName + "信息吗？", function () {
                $.ajax({
                    type: 'post',
                    url: prefix + "/remove/" + id,
                    success: function (result) {
                        if (result.code == web_status.SUCCESS) {
                            $.modal.alertSuccess(result.msg);
                            $.treeTable.refresh();
                        } else {
                            $.modal.alertError(result.msg);
                        }
                    }
                });
            });
        }
    </script>
</body>

</html>